<template>
    <div class="container">
        <el-form
            :model="ruleForm"
            ref="ruleForm"
            :rules="rules"
            :label-position="labelPosition"
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="品名：">
                      <div slot="label">品名</div>
                      <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">རྫས་མིང་ </div>
                      {{ruleForm.inputsName}}</el-form-item>
                    <el-form-item label="类别：">
                      <div slot="label">类别</div>
                      <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">རིགས་</div>
                      {{ruleForm.type}}</el-form-item>

                    <el-form-item label="投入品照片：">
                      <div slot="label">投入品照片</div>
                      <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">གཏོང་དངོས་འདྲ་པར་</div>
                        <img :src="img" alt style="width:200px;height:200px;" />
                    </el-form-item>
                    <el-form-item label="购买时间：">
                      <div slot="label">购买时间</div>
                      <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">ཉོ་སྒྲུབ་དུས་ཚོད་</div>
                      {{ruleForm.buyTime}}</el-form-item>
                    <el-form-item label="规格：">
                      <div slot="label">规格</div>
                      <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">ཚད་གཞི་</div>
                      {{ruleForm.spec}}{{ruleForm.specUnits}}</el-form-item>
                    <el-form-item label="剩余数量：">{{ruleForm.surplusNumber}}{{ruleForm.units}}</el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="来源：">
                      <div slot="label">来源</div>
                      <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">འབྱུང་ཁུངས།</div>
                      {{ruleForm.source}}</el-form-item>
                    <el-form-item label="供应商名称：">
                      <div slot="label">供应商名称</div>
                      <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">མཁོ་འདོན་ཚོང་པའི་མིང་</div>
                      {{ruleForm.supplyName}}</el-form-item>
                    <el-form-item label="联系人：">
<!--                      <div slot="label">联系人</div>-->
<!--                      <div slot="label" style="line-height: 0px">འདྲི་རྩད་བྱེད་སྟངས་ </div>-->
                      {{ruleForm.userName}}</el-form-item>
                    <el-form-item label="联系电话：">
<!--                      <div slot="label">查询方式</div>-->
<!--/*                      <div slot="label" style="line-height: 0px">འདྲི་རྩད་བྱེད་སྟངས་ </div>*/-->
                      {{ruleForm.phone}}</el-form-item>
                    <el-form-item label="生产日期：">
                      <div slot="label">生产日期</div>
                      <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">ཐོན་སྐྱེད་ཀྱི་ཚེས་གྲངས་</div>
                      {{ruleForm.producedTime}}</el-form-item>
                    <el-form-item label="保质期：">
                      <div slot="label">保质期</div>
                      <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">སྤུས་ཚད་འགན་ལེན་དུས་ཡུན་</div>
                      {{ruleForm.expirationDate}}月 <span v-if="ifshow" style="color:red;"> 未过期</span><span v-if="ifshow1">已过期</span></el-form-item>
                    <el-form-item label="购买数量：">
<!--                      <div slot="label">查询方式</div>-->
<!--                      <div slot="label" style="line-height: 0px">འདྲི་རྩད་བྱེད་སྟངས་ </div>-->
                      {{ruleForm.totalNumber}}{{ruleForm.units}}</el-form-item>
                </el-col>
            </el-row>
            <!-- <el-form-item label="操作信息："> -->
                <el-table
                    :data="tableData"
                    border
                    style="margin-top:20px;"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <!-- <el-table-column sortable label="类型རིགས་">
                        <template slot-scope="scope">{{scope.row.type=='IN'?"增加":"减少"}}</template>
                    </el-table-column>
                    <el-table-column prop="time" sortable label="操作时间"></el-table-column>
                    <el-table-column sortable label="数量གྲངས་འབོར་">
                        <template slot-scope="scope">{{scope.row.number}}{{scope.row.units}}</template>
                    </el-table-column> -->
                          <el-table-column sortable label="类型་">
                        <template slot-scope="scope">{{scope.row.type=='IN'?"增加":"减少"}}</template>
                    </el-table-column>
                    <el-table-column prop="time" sortable label="操作时间"></el-table-column>
                    <el-table-column sortable label="数量">
                        <template slot-scope="scope">{{scope.row.number}}{{scope.row.units}}</template>
                    </el-table-column>
                </el-table>
            <!-- </el-form-item> -->
            <el-form-item class="footerFixed" label-width="0px">
                <el-button @click="backPage">返回ཕྱིར་ལོག</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { inputs_findById } from '@/request/api';
export default {
    data() {
        return {
            labelPosition:"right",
            id: "",
            ruleForm: {},
            tableData:[],
            day:"",
            rules:{

            },
			img:'',
			ifshow:false,
			ifshow1:false
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        if (this.id == undefined) {
        } else {
            this.init();
        }
    },
    methods: {
        init() {
            inputs_findById(this.id).then((res) => {
                if (res.code == 200) {
                    this.ruleForm = res.data;
                    this.tableData = res.data.list;
					this.img = this.$store.state.plantImg + res.data.inputsImg
                    var producedTime = Date.parse(res.data.producedTime);
                    var date = new Date();
                    var newDate = Date.parse(this.$util.dateFormat("yyyy-MM-dd", date));
                    this.day = (newDate - producedTime)/(1*24*60*60*1000);
					if(this.day > this.ruleForm.expirationDate*30){
						this.ifshow = false
						this.ifshow1 = true
					}else{
						this.ifshow = true
						this.ifshow1 = false
					}
					// <span style="color:red;"><span style="display:inline;"></span>{{(day > ruleForm.expirationDate*30)?"已过期":"未过期"}}</span>
                }
            });
        },
        handleCurrentChange() {

        },
        backPage() {
            this.$router.go(-1)
        }
    }
};
</script>

<style scoped>
</style>
